<style scoped>
.wraper {
    padding: 0 30px;
}

.search {
    padding-bottom: 20px;
}

.search span {
    color: #68777c;
    font-weight: bold;
    padding-right: 18px;
}

.search button {
    background-color: #00a8f7;
    color: #fff;
    margin-left: 8px;
}

.top {
    margin-bottom: 20px;
    border-top: 1px dashed #cccccc;
}



.wraper .headline {
    position: relative;
    font-size: 12px;
    color: #303134;
    font-weight: bold;
    margin: 10px 0;
    line-height: 32px;
    height: 32px;
}

.wraper .add-agent {
    position: absolute;
    top: 0px;
    right: 30px;
    background-color: #348bf2;
    color: #fff;
}

.iconfont {
    font-size: 14px;
}

.red-font {
    color: #ff1f1f;
}

/* 分页 start */

.page {
    margin: 20px 0;
}
.ivu-page {
    padding-bottom: 150px;
} 

/* 分页 end */

.line{
    margin-top: 20px;
    margin-bottom: 20px;
    height: 0;
    border-top: 1px solid #d9d9d9;
    clear: both;
    overflow: hidden;
}
.pic{
    overflow: hidden;
}
.title{
    font-size: 16px;
    font-weight: normal;
    color: #ef8411;
    margin-bottom: 20px;
}
.title span{
    padding-left: 10px;
    font-size: 14px;
    color: #646464;
}
.piclist{
    position: relative;
    float: left;
    margin-right: 15px;
    width: 250px;
    cursor: pointer;
}
.piclist:hover .glass{
    display: block;
}
.piclist img{
    display: block;
    width: 100%;
}
.piclist .glass{
    display: none;
    width: 38px;
    height: 38px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.mt20{
    margin-bottom: 20px;
}
.mr20{
    margin-right: 20px;
}
</style>

<template>
    <div class="employee-manage">
        <product-title></product-title>
        <div class="wraper">            
            <div class="detail">                
                <div class="clearfix">                   
                    <Form :model="userinfo" label-position="right" :label-width="100">
                        <Row>
                            <Col :sm="{ span: 12 }" :md="{ span: 11, offset: 1 }" :lg="{ span: 7 }" >
                                <FormItem label="姓名">
                                    <Input v-model="userinfo.name" disabled ></Input>
                                </FormItem>
                            </Col>
                            <Col :lg="{ span: 7, offset: 1 }" :md="{ span: 11, offset: 1 }" :sm="{ span: 12 }">
                                <FormItem label="开户行">
                                    <Input v-model="userinfo.bank_name" disabled ></Input>
                                </FormItem>
                            </Col>
                            <Col :lg="{ span: 7, offset: 1 }" :md="{ span: 11, offset: 1 }" :sm="{ span: 12 }">
                                <FormItem label="银行卡号">
                                    <Input v-model="userinfo.card_num" disabled ></Input>
                                </FormItem>
                            </Col>
                            <Col :lg="{ span: 7 }" :md="{ span: 11, offset: 1 }" :sm="{ span: 12 }">
                                <FormItem label="身份证号">
                                    <Input v-model="userinfo.id_number" disabled ></Input>
                                </FormItem>
                            </Col>
                            <Col :lg="{ span: 7, offset: 1 }" :md="{ span: 11, offset: 1 }" :sm="{ span: 12 }">
                                <FormItem label="资格证号">
                                    <Input v-model="userinfo.certificate_no" disabled ></Input>
                                </FormItem>
                            </Col>
                        </Row>
                    </Form>
                    <div class="line"></div>
                    <div class="pic">
                        <Row>
                            <Col :lg="{ span: 12 }" :md="{ span: 12 }" :sm="{ span: 24 }" :xs="{ span: 24 }">
                                <h2 class="title">身份证正反面/手持证件照<span>(点击图片查看大图)</span></h2>
                                <div class="piclist">
                                   <Card>
                                       <img @click="openModal(userinfo.id_front_url)" :src="userinfo.id_front_url" />
                                       <img @click="openModal(userinfo.id_front_url)" class="glass" src="../../asset/img/glass.png" />
                                    </Card>
                                </div>
                                <div class="piclist">
                                   <Card>
                                       <img @click="openModal(userinfo.id_reverse_url)" :src="userinfo.id_reverse_url" />
                                       <img @click="openModal(userinfo.id_reverse_url)" class="glass" src="../../asset/img/glass.png" />
                                    </Card>
                                </div>
                                <div class="piclist">
                                   <Card>
                                       <img @click="openModal(userinfo.id_hand_url)" :src="userinfo.id_hand_url" />
                                       <img @click="openModal(userinfo.id_hand_url)" class="glass" src="../../asset/img/glass.png" />
                                    </Card>
                                </div>
                            </Col>
                            <Col :lg="{ span: 12 }" :md="{ span: 12 }" :sm="{ span: 24 }" :xs="{ span: 24 }">
                                <h2 class="title">银行卡照/资格证书照<span>(点击图片查看大图)</span></h2>
                                <div class="piclist">
                                   <Card>
                                       <img @click="openModal(userinfo.card_url)" :src="userinfo.card_url" />
                                       <img @click="openModal(userinfo.card_url)" class="glass" src="../../asset/img/glass.png" />
                                    </Card>
                                </div>
                                <div class="piclist">
                                   <Card>
                                       <img @click="openModal(userinfo.certificate_url)" :src="userinfo.certificate_url" />
                                       <img @click="openModal(userinfo.certificate_url)"class="glass" src="../../asset/img/glass.png" />
                                    </Card>
                                </div>
                            </Col>
                        </Row>
                    </div>
                    <div class="line"></div>
                    <div class="">
                        <h2 class="title">驳回原因</h2>
                        <Input v-model="msg" type="textarea" :rows="4" placeholder="请输入驳回原因..." class="mt20"></Input>
                        <Button @click="setstatus(4)" type="error" size="large" class="mr20">驳回申请</Button>
                        <Button @click="setstatus(2)" type="success" size="large">审核通过</Button>
                    </div>
                </div>
            </div>
        </div>
        <Modal title="查看大图" v-model="visible">
            <img :src="openimg" v-if="visible" style="width: 100%;max-width:1000px;">
        </Modal>
    </div>
</template>

<script>
import productTitle from '../../components/productTitle'
import { getDetail_validate , set_validate} from '../../api/validate'

export default {
    data() {

        return {
            userinfo:{
                name:'',
                bank_name:'',
                card_num:'',
                id_number:'',
                certificate_no:'',
                id_front_url:'',
                id_reverse_url:'',
                id_hand_url:'',
                card_url:'',
                certificate_url:'',
                msg:''
            },
            openimg:'',
            msg:'',
            visible: false,
        }
    },
    components: {
        productTitle
    },
    mounted () {
        this.getDetail()
    },
    methods: {
        getDetail(){
            let _params = {
                id:this.$route.params.id
            }
            new Promise((resolve, reject) => {
                getDetail_validate(_params).then(response => {
                    console.log(response.data);
                    if (response.data.err == 0) {
                        this.userinfo = response.data.data
                    } else {
                        this.$Message.error(response.data.info);
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },
        openModal(src){
            this.visible = true
            this.openimg = src
        },
        setstatus(status){
            let _params = {
                id:this.$route.params.id,
                status:status,
                msg:this.msg
            }
            new Promise((resolve, reject) => {
                set_validate(_params).then(response => {
                    if (response.data.err == 0) {
                        this.$Message.success(response.data.info);
                        this.$router.push({name:'certification_list'})
                    } else {
                        this.$Message.error(response.data.info);
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        }
    }
}
</script>
